﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
        <script type="text/javascript" language="javascript" src="scripts/libraries/jquery-1.8.3.js"></script>
        <script type="text/javascript" language="javascript" src="scripts/libraries/jquery-ui-1.9.2.js"></script>
        <script type="text/javascript" language="javascript" src="scripts/event-buffer.js"></script>
        <script type="text/javascript" language="javascript" src="scripts/table-scroll.js"></script>
        <script type="text/javascript" language="javascript" src="demo-scripts/demo-scroll-script.js"></script>
        <script type="text/javascript" language="javascript" src="demo-scripts/common.js"></script>
    
        <link href="styles/style.css" rel="stylesheet" type="text/css" />

        <link href="styles/cupertino/jquery-ui-1.9.2.css" rel="stylesheet" id="themeLink" type="text/css" />
        <link href="styles/cupertino/scroll-style.css" rel="stylesheet" id="scrollStyle" type="text/css" />
    
        <title>Scroll Demo</title>
	</head>
	<body>
        <h2><a href="http://javascriptgrid.codeplex.com">Project page on CodePlex.</a></h2>
        <select id="themeSelector">
            <option label="Flick" value="flick">Flick</option>
            <option label="Cupertino" value="cupertino" selected="selected">Cupertino</option>
            <option label="Vader" value="vader">Vader</option>
        </select>
        <br />
        <br />
	    <table id="ScrollableTable" style="font-size:14px" border="1">
	        <thead>
	            <tr>
	                <td class="scrollHeader">Table Header (Not Scrollable)</td>
                    <td>&nbsp;</td>
	            </tr>
	        </thead>
	        <tr>
	            <td class="dataCell">&nbsp;</td>
                <td id="scrollContainer" rowspan="13"></td>
	        </tr>
	        <tr>
	            <td class="dataCell">&nbsp;</td>
	        </tr>
	        <tr>
	            <td class="dataCell">&nbsp;</td>
	        </tr>
	        <tr>
	            <td class="dataCell">&nbsp;</td>
	        </tr>
	        <tr>
	            <td class="dataCell">&nbsp;</td>
	        </tr>
            <tr>
	            <td class="dataCell">&nbsp;</td>
	        </tr>
	        <tr>
	            <td class="dataCell">&nbsp;</td>
	        </tr>
	        <tr>
	            <td class="dataCell">&nbsp;</td>
	        </tr>
	        <tr>
	            <td class="dataCell">&nbsp;</td>
	        </tr>
            <tr>
	            <td class="dataCell">&nbsp;</td>
	        </tr>
	        <tr>
	            <td class="dataCell">&nbsp;</td>
	        </tr>
	        <tr>
	            <td class="dataCell">&nbsp;</td>
	        </tr>
	        <tr>
	            <td class="dataCell">&nbsp;</td>
	        </tr>
	    </table>
        <br />
        <div id="accordion">

            <h3>Options</h3>
            <div style="height:110px;">
                <label style="display: inline-block;margin-bottom:20px">
                    <input style="vertical-align: middle" id="useEventBuffer" type="checkbox" />
                    <span style="vertical-align: middle">Use event buffer</span>
                </label>
                <br />
                <span>Number of virtual elements:</span><input id="numberOfElements" name="numberOfElements" />
                <br />
                <input style="margin-top:20px" type="button" id="buttonApply" value="Apply" />
                <input style="margin-top:20px" type="button" id="buttonDestroy" value="Destroy" />
            </div>

            <h3>Events</h3>
            <div style="height:170px;">
                <div>Events log:</div>
                <div style="float:left">
                    <textarea style="width:550px; height:130px" id="logTextarea"></textarea>
                </div>
                <div style="float:left; margin-left:20px">
                    <input type="button" id="clearLogButton" value="Clear" />
                </div>
            </div>

        </div>
	</body>
</html>